<%--
  Created by IntelliJ IDEA.
  User: 唐清枫
  Date: 2023/9/13
  Time: 20:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>请假审批表</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../static/js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../static/js/jquery-3.2.1.min.js"></script>
    <script src="../static/js/Core_values.js"></script>

</head>
<body>
<script src="../static/js/flower.js"></script>

<div id="tab" style="height: 100%">

    <span>请假状态查询</span>
    <el-select v-model="selectedValue" placeholder="选择请假状态" @change="selectInfo">
        <el-option label="无" value=""></el-option>
        <el-option label="未请假" value="未请假"></el-option>
        <el-option label="申请请假" value="申请请假"></el-option>
        <el-option label="请求被驳回" value="请求被驳回"></el-option>
    </el-select>


    <el-table
            :data="tableData"
            border
            style="width: 100%"
            @selection-change=""
    >
        <el-table-column
                prop="userName"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="userRealName"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="leaveStatus"
                label="请假状态"
                width="150">
        </el-table-column>
        <el-table-column
                prop="leaveInfo"
                label="请假原因"
                width="200">
        </el-table-column>
        <el-table-column
                prop="leaveDays"
                label="请假天数"
                width="150">
        </el-table-column>
        <el-table-column
                prop="leaveSubmit"
                label="请假日期"
                width="200">
        </el-table-column>
        <el-table-column
                label="操作"
                width="180">
            <template slot-scope="scope">
                <el-button type="primary" size="small" @click="permit(scope.row.userName)">通过</el-button>
                <el-button type="danger" size="small" @click="notPermit(scope.row.userName)">驳回</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination @current-change="changeCurrentPage"
                   background
                   layout="prev, pager, next"
                   :total="totals"
                   :current-page="currentPage"
                   :page-size="pageSize"
    >
    </el-pagination>
</div>

<script>
    new Vue({
        el: "#tab",
        data: {
            tableData: [],
            totals: 0,
            currentPage: 1,
            pageSize: 5,
            selectedValue:""
        },
        methods: {
            // selected(value){
            //     var v = this
            //     this.selectedValue=value
            //     $.ajax({
            //         url:"../leave/leavestatus",
            //         type:"get",
            //         data: {
            //             leaveStatus:this.selectedValue
            //         },
            //         success:function (res) {
            //             v.tableData = res.object
            //         },
            //         error:function () {
            //             v.$message.error("服务器出错")
            //         }
            //     })
            // },
            changeCurrentPage(newCurrentPage) {
                this.currentPage = newCurrentPage
                this.selectInfo()
            },
            selectInfo(value) {
                var v = this
                this.selectedValue=value
                $.ajax({
                    url: "../leave/info",
                    type: "get",
                    dataType: 'json',
                    data: {
                        "currentPage": v.currentPage,
                        "pageSize": v.pageSize,
                        "leaveStatus":this.selectedValue
                    },
                    success: function (res) {
                        if (res.status === 200) {
                            v.tableData = res.object.tableDatas
                            v.totals = res.object.totals
                        }
                    },
                    error: function () {
                        alert("服务器出错")
                    }
                })
            },
            permit(userName){
                var v = this
                v.$confirm("是否执行此操作，是否继续","是否准许请假",{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    $.ajax({
                        url:"../leave/permit/"+userName,
                        type:"put",
                        data:{
                            userName:userName
                        },
                        success:function (res) {
                            if (res.status===200){
                                v.$message(res.message)
                                v.selectInfo()
                            }else if(res.status===500){
                                v.$message().warning("操作失败")
                            }
                        },
                        error:function (res) {
                            console.log(res)
                            alert("访问错误")
                        }
                    })
                });
            },
            notPermit(userName){
                var v = this
                v.$confirm("是否执行此操作，是否继续","是否驳回请假",{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    $.ajax({
                        url:"../leave/notPermit/"+userName,
                        type:"put",
                        data:{
                            userName:userName
                        },
                        success:function (res) {
                            if (res.status===200){
                                v.$message("请求已经被驳回")
                                v.selectInfo()
                            }else if(res.status===500){
                                v.$message().warning("操作失败")
                            }
                        },
                        error:function (res) {
                            console.log(res)
                            alert("访问错误")
                        }
                    })
                });
            },
            selectByLeaveStatus(){
                var v = this
                $.ajax({
                    url:"../leave/leavestatus",
                    type:"get",
                    data:v.leavestatus,
                    success:function (res) {
                        console.log(res)
                    },
                    error:function () {
                        console.log("ssss")
                    }
                })
            }
        },
        mounted: function () {
            this.selectInfo()
        }
    })
</script>
</body>
</html>






